<template>
  <transition name="fade">
    <div
      class="back-top"
      :class="{ transition: !$slots.default }"
      :style="customStyle"
      @click="handleBackTop"
      v-show="isShow"
    >
      <template v-if="$slots.default">
        <slot></slot>
      </template>
      <ph-icon class="fa-chevron-up" v-else />
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent, toRefs, Ref } from 'vue'
import useMount from './useMount'
import useAnimate from './useAnimate'

export default defineComponent({
  components: {
    PhIcon: defineAsyncComponent(()=>import('@/components/base/icon.vue'))
  },
  props: {
    right: {
      type: Number,
      default: 40
    },
    bottom: {
      type: Number,
      default: 40
    },
    circle: {
      type: Boolean,
      default: true
    },
    selector: {
      type: String,
      default: '.ph-tab-panel'
    },
    offset: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const { right, bottom, circle, selector, offset } = toRefs(props)
    const customStyle = {
      right: right.value + 'px',
      bottom: bottom.value + 'px',
      borderRadius: circle.value ? '50%' : 0
    }

    const { isShow, ele } = useMount(offset, selector)
    const { handleBackTop } = useAnimate(ele as Ref<HTMLElement>, emit)

    return {
      customStyle,
      handleBackTop,
      isShow
    }
  }
})
</script>

<style lang="scss" scoped>
.back-top {
  width: 40px;
  height: 40px;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
  cursor: pointer;
  transition: all .5s;
}
.transition {
  &:hover {
    background-color: #409eff;
    & > i {
      color: #fff;
    }
  }
}

.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
</style>